<template>
  <div>
    <div :class="{ fzcolor: col }">如果name变量改变，颜色变量col也跟着变。</div>
    <div>变化前的值：{{ oldname }}</div>
    <div>变化后的值：{{ name }}</div>
    <input type="text" v-model="name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "hello",
      oldname: "hello",
      col: false,
    };
  },
  watch: {
    name: function (newVal, oldVal) {
      console.log("newVal:" + newVal);
      console.log("oldVal:" + oldVal);
      this.oldname = oldVal;
      this.col = !this.col;
    },
  },
};
</script>
<style>
.fzcolor {
  color: aquamarine;
}
</style>